<template>
  <div class="home">
    <!-- 一级信息 -->
    <div class="main-title row">
      <div style="width: 20%">一级信息</div>
      <div style="width: 80%; text-align: right; margin-right: 20px">
        <el-button class="sub-btn" @click="onSubmit">提交</el-button>
      </div>
    </div>
      <el-form
        class="body-form"
        :model="formData"
        label-width="130px"
        :inline="true"
        :rules="rulesformData"
      >
        <div class="main-body">
        <el-form-item
          class="form-item"
          prop="serviceCorporationId"
          label="所属劳务公司:"
        >
          <el-select
            class="add-menu-level"
            v-model="formData.serviceCorporationId"
            placeholder="请选择劳务公司"
            @change="getTeamList"
          >
            <el-option
              v-for="item in servicesCompanyList"
              :key="item.serviceCorporationId"
              :label="item.name"
              :value="item.serviceCorporationId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" prop="teamId" label="所属班组:">
          <el-select
            class="add-menu-level"
            v-model="formData.teamId"
            placeholder="请选择班组"
          >
            <el-option
              v-for="item in teamList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" prop="workTypeId" label="请选择工种:">
          <el-select
            class="add-menu-level"
            v-model="formData.workTypeId"
            placeholder="请选择工种"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.workTypeName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" prop="name" label="姓名:">
          <el-input v-model="formData.name" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item class="form-item" prop="birthDate" label="出生日期:">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="formData.birthDate"
            style="width: 220px"
            :disabled="isDisabled"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="form-item" prop="gender" label="性别:">
          <el-select
            class="add-menu-level"
            v-model="formData.gender"
            placeholder="请选择性别"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in sexList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          class="form-item"
          prop="certificateType"
          label="证件类型:"
        >
          <el-select
            class="add-menu-level"
            v-model="formData.certificateType"
            placeholder="身份证"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in certificateTypeList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" prop="certificateNumber" label="证件号:">
          <el-input
            v-model="formData.certificateNumber"
            :disabled="isDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item class="form-item" prop="certificateValidPeriod" label="证件有效期:">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="formData.certificateValidPeriod"
            style="width: 220px"
            :disabled="isDisabled"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="form-item" prop="clan" label="民族:">
          <el-input
            v-model="formData.clan"
            :disabled="isDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="form-item address"
          prop="address"
          label="家庭住址:"
        >
          <el-input v-model="formData.address" clearable></el-input>
        </el-form-item>
        </div>
        <div class="main-title row">
          <div style="width: 20%">二级信息</div>
        </div>
        <div class="main-body">
          <el-form-item class="form-item" prop="phone" label="联系方式:">
          <el-input v-model.number="formData.phone"></el-input>
        </el-form-item>
        <el-form-item class="form-item" prop="hometown" label="籍贯:">
          <el-input v-model="formData.hometown"></el-input>
        </el-form-item>
        <el-form-item
          class="form-item"
          prop="politicalOutlookId"
          label="政治面貌:"
        >
          <el-select
            class="add-menu-level"
            v-model="formData.politicalOutlookId"
            placeholder="政治面貌"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" prop="country" label="国籍:">
          <el-input v-model="formData.country"></el-input>
        </el-form-item>
        <el-form-item class="form-item" prop="postcode" label="邮编:">
          <el-input v-model.number="formData.postcode"></el-input>
        </el-form-item>
        <el-form-item
          class="form-item address"
          prop="currentResidence"
          label="现居住地:"
        >
          <el-input v-model="formData.currentResidence" clearable></el-input>
        </el-form-item>
        <el-form-item
          class="form-item"
          prop="emergencyContact"
          label="紧急联系人:"
        >
          <el-input v-model="formData.emergencyContact"></el-input>
        </el-form-item>
        <el-form-item class="form-item" prop="emergencyContactPhone" label="紧急联系人电话:">
          <el-input v-model.number="formData.emergencyContactPhone"></el-input>
        </el-form-item>
        </div>
        <div class="main-title row">
          <div style="width: 20%">银行卡信息</div>
        </div>
        <div class="main-body">
          <el-form-item class="form-item" label="收款方:">
            <el-input v-model="formData.beneficiary"></el-input>
          </el-form-item>
          <el-form-item class="form-item" label="开户人姓名:">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item class="form-item" label="银行卡号:">
            <el-input v-model.number="formData.number"></el-input>
          </el-form-item>
        </div>
        <div class="main-title row">
          <div style="width: 20%">工资设置</div>
        </div>
        <div class="main-body">
          <el-form-item class="form-item" label="日工资金额:" prop="dailyWage">
            <el-input v-model.number="formData.dailyWage"></el-input>
          </el-form-item>
          <el-form-item class="form-item" label="日生活费金额:" prop="alimony">
            <el-input v-model.number="formData.alimony"></el-input>
          </el-form-item>
        </div>
      </el-form>
  </div>
</template>
<script>
import {
  getTree,
  getWorkType,
  getServiceCorporation,
  insertPersonnel,
  getPersonnelById,
  updatePersonnel,
} from "@/api/worker.js";
export default {
  data(){
    var validateCert=(rule, value, callback) => {
      if(!this.regular.test(value)) {
        callback(new Error('请输入正确的证件号'));
      }else{
        callback();
      }
    };
    return{
      formData:{},
      regular:
        /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      rulesformData:{
        serviceCorporationId: [
          {
            required: true,
            message: "请选择所属劳务公司",
            trigger: "change",
          },
        ],
        teamId: [
          {
            required: true,
            message: "请选择所属班组",
            trigger: "change",
          },
        ],
        workTypeId: [
          {
            required: true,
            message: "请选择工种",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        birthDate: [
          {
            required: true,
            message: "请选择出生日期",
            trigger: "change",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        certificateType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        certificateNumber: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur",
          },
          {
            validator:validateCert,
            trigger:"blur"
          }
        ],
        certificateValidPeriod: [
          {
            required: true,
            message: "请选择证件有效期",
            trigger: "change",
          },
        ],
        clan: [
          {
            required: true,
            message: "请输入民族",
            trigger: "blur",
          },
        ],
        // address: [
        //   {
        //     required: true,
        //     message: "请输入家庭住址",
        //     trigger: "blur",
        //   },
        // ],
        phone: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: "blur",
          },
          {
            type:"number",
            message: "手机号只能是数字",
            trigger: "blur",
          }
        ],
        hometown: [
          {
            required: true,
            message: "请输入籍贯",
            trigger: "blur",
          },
        ],
        // politicalOutlookId: [
        //   {
        //     required: true,
        //     message: "请选择政治面貌",
        //     trigger: "change",
        //   },
        // ],
        country: [
          {
            required: true,
            message: "请输入国籍",
            trigger: "blur",
          },
        ],
        // postcode: [
        //   {
        //     required: true,
        //     message: "请输入邮编",
        //     trigger: "blur",
        //   },
        //   {
        //     type:"number",
        //     message: "邮编只能是数字",
        //     trigger: "blur",
        //   }
        // ],
        // currentResidence: [
        //   {
        //     required: true,
        //     message: "请输入现居地",
        //     trigger: "blur",
        //   },
        // ],
        // emergencyContact: [
        //   {
        //     required: true,
        //     message: "请输入紧急联系人",
        //     trigger: "blur",
        //   },
        // ],
        // emergencyContactPhone: [
        //   {
        //     required: true,
        //     message: "请输入紧急联系人电话",
        //     trigger: "blur",
        //   },
        //   {
        //     type:'number',
        //     message: "手机号只能是数字",
        //     trigger: "blur",
        //   }
        // ],
        dailyWage: [
          {
            required: true,
            message: "请输入工资金额",
            trigger: "blur",
          },
          {
            type:"number",
            message: "工资金额只能是数字",
            trigger: "blur",
          }
        ],
        alimony: [
          {
            required: true,
            message: "请输入生活费金额",
            trigger: "blur",
          },
          {
            type:"number",
            message: "生活费金额只能是数字",
            trigger: "blur",
          }
        ],
      },
      message: "",
      isDisabled: false,
      servicesCompanyList:null,
      teamList: null,
      typeList:null,
      sexList: [
        {
          value: 0,
          label: "女",
        },
        {
          value: 1,
          label: "男",
        },
      ],
      certificateTypeList: [
        {
          value: 1,
          label: "居民身份证",
        },
        {
          value: 2,
          label: "护照",
        },
        {
          value: 3,
          label: "港澳通行证",
        },
        {
          value: 4,
          label: "台湾通行证",
        },
      ],
      statusList: [
        {
          value: 13,
          label: "群众",
        },
        {
          value: 3,
          label: "共青团员",
        },
        {
          value: 2,
          label: "中共预备党员",
        },
        {
          value: 1,
          label: "中共党员",
        },
        {
          value: 14,
          label: "其他党派人士",
        },
        {
          value: 12,
          label: "无党派人士",
        },
      ],
    }
  },
  methods:{
    certificateTypeChange(){
      if(this.infoLevel1.certificateType == '居民身份证'){
        this.regular = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      } else if (this.infoLevel1.certificateType == '护照') {
        this.regular = /^([a-zA-z]|[0-9]){5,17}$/;
      } else if (this.infoLevel1.certificateType == '港澳通行证') {
        this.regular = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/;
      } else if (this.infoLevel1.certificateType == '台湾通行证') {
        this.regular = /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/;
      }
    },
    checkFormData(){
      if (!this.formData.serviceCorporationId) {
        this.message = "请选择所属劳务公司";
        return false;
      } else if (!this.formData.teamId) {
        this.message = "请选择所属班组";
        return false;
      } else if (!this.formData.workTypeId) {
        this.message = "请选择工种";
        return false;
      } else if (!this.formData.name) {
        this.message = "请输入姓名";
        return false;
      } else if (!this.formData.birthDate) {
        this.message = "请选择出生日期";
        return false;
      } else if (this.formData.gender==null) {
        this.message = "请选择性别";
        return false;
      } else if (!this.formData.certificateType) {
        this.message = "请选择证件类型";
        return false;
      } else if (!this.formData.certificateNumber) {
        this.message = "请输入证件号";
        return false;
      }else if (this.certificateType == 2) {
        this.regular = /^([a-zA-z]|[0-9]){5,17}$/;
      } else if (this.certificateType == 3) {
        this.regular = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/;
      } else if (this.certificateType == 4) {
        this.regular = /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/;
      }else if (
        this.formData.certificateNumber &&
        !this.regular.test(this.formData.certificateNumber)
      ) {
        this.message = "请输入正确的证件号";
        return false;
      } else if (!this.formData.certificateValidPeriod) {
        this.message = "请选择证件有效期";
        return false;
      } else if (!(this.formData.clan + "")) {
        this.message = "请输入民族";
        return false;
      // } else if (!this.formData.address) {
      //   this.message = "请输入家庭住址";
      //   return false;
      } else if(!this.formData.phone) {
        this.message = "请输入联系方式";
        return false;
      } else if (!/^1[34578]\d{9}$/.test(this.formData.phone)) {
        this.message = "请填写正确的联系方式";
        return false;
      } else if (!this.formData.hometown) {
        this.message = "请输入籍贯";
        return false;
      // } else if (this.formData.politicalOutlookId==null) {
      //   this.message = "请选择政治面貌";
      //   return false;
      } else if (!this.formData.country) {
        this.message = "请输入国籍";
        return false;
      } else if (!this.formData.postcode) {
        this.message = "请输入邮编";
        return false;
      // } else if (!this.formData.currentResidence) {
      //   this.message = "请输入现居地";
      //   return false;
      // } else if (!this.formData.emergencyContact) {
      //   this.message = "请输入紧急联系人";
      //   return false;
      // } else if (!this.formData.emergencyContactPhone) {
      //   this.message = "请输入紧急联系人电话";
      //   return false;
      // } else if (!/^1[34578]\d{9}$/.test(this.formData.emergencyContactPhone)) {
      //   this.message = "请填写正确的紧急联系人电话";
      //   return false;
      } else if (!this.formData.dailyWage) {
        console.log("工资金额");
        this.message = "请输入工资金额";
        return false;
      }else if (!this.formData.alimony) {
        console.log("生活费金额");
        this.message = "请输入生活费金额";
        return false;
      }else {
        this.message = "";
        return true;
      }
    },
    onSubmit() {
        if(this.checkFormData()){
          console.log('object');
        insertPersonnel(this.formData).then((res) => {
          console.log(res);
          // if(res.code==16003){
          //   this.$message.success(res.message)
          // }
          this.$message({
            type: "success",
            message: "进场成功！",
          });
          this.$router.push({ path: "/quickFiling/quickFiling" });
        }).catch(res=>{
          this.$message({
            type: "error",
            message: res.message,
          });
        });
      }else{
        if (this.message) this.$message.warning(this.message);
      }
    },
    getFormData(){
      var personId = this.$route.query.id
      getPersonnelById(personId).then((res) => {
        console.log(res.data.data);
        this.formData = res.data.data
        // this.formData.
      console.log(this.formData);
      });
    },
    // 获取班组列表
    getTeamList(serviceCorporationId) {
      if (serviceCorporationId != null) {
        getTree().then((res) => {
          const team = res.data.data.filter((e) => {
            return e.id == serviceCorporationId;
          });
          if (team.length > 0) {
            this.teamList = team[0].children;
          } else this.teamList = null;
        });
      }
    },
  },
  created(){
    this.getFormData()
    getWorkType().then((res) => {
      console.log(res);
      this.typeList = res.data.data.records;
    });
    getServiceCorporation().then((res) => {
      // console.log(res);
      this.servicesCompanyList = res.data.data.records;
    });
  }
}
</script>

<style lang="scss" scoped>
.home {
  min-height: 100%;
  width: 100%;
  min-width: 750px;
  background-color: #f8f8f9;
}

.title {
  text-align: left;
  /* width: 100%; */
  padding-left: 20px;
  border: solid 1px #e4e4e4;
  height: 55px;
  line-height: 20px;
  background-color: #f3f3f3;
  color: #999999;
  padding-top: 20px;
  padding-left: 20%;
  font-size: 13px;
}

.title p {
  height: 20px;
  margin: 0;
  padding-left: 5px;
  border-left: solid 3px #1abc9c;
}

.row {
  display: flex;
  flex-direction: row;
}

.main {
  margin-top: 20px;
  // width: 1100px;
  width: 100%;
  // border: solid 1px #e4e4e4;
  padding-top: 0;
  padding-bottom: 20px;
  /* width: 80%; */
  margin-left: 20%;
  height: 100%;
  text-align: center;
}

.main-title {
  height: 40px;
  text-align: left;
  padding-left: 20px;
  font-size: 14px;
  color: #333333;
  line-height: 40px;
  .sub-btn {
    margin-left: 22%;
    background-color: #1abc9c;
    color: #ffffff;
    width: 80px;
    height: 35px;
    padding-top: 0;
    line-height: 35px;
  }
}

.main-body {
  // border: solid 1px #e4e4e4;
  min-height: 150px;
  background-color: #ffffff;
  padding-top: 10px;
  padding-left: 10px;
}

.form-item {
  min-height: 50px;
  line-height: 50px;
}

.body-form {
  text-align: left;
}

.form-center {
  padding-left: 150px;
}

.body-form .el-select {
  width: 220px;
  /* width: 50%; */
  margin-top: 10px;
}

.form-item .el-input {
  width: 220px;
  margin-top: 10px;
  border-radius: 0;
}
// .address{
//     display: block;
//     width: 100%;
// }
.address .el-input {
  width: 585px;
  // width: 220px;
  // max-width: 585px;
}

.form-item .el-input__inner {
  border-radius: 0;
}

.form-img {
  width: 180px;
  height: 180px;
  margin-right: 42px;
  text-align: center;
  border: solid 1px #e4e4e4;
}

.form-img .icon-add {
  margin-top: 50px;
}
/* .form-item.el-form-item__content.el-input .el-input__inner {
        height: 40px;
        border-radius: 0;
    } */
</style>

